<template>
    <el-dialog :title="show ? '用户登录' : '用户注册'" :visible="dialogFormVisible" width="28%" :before-close="handleClose">
      <div
        v-show="show">
        <el-form :model="form" label-width="60px" :rules="rules">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" type="email" clearable autocomplete="off" placeholder="请输入邮箱">
              <el-select v-model="select" slot="append" placeholder="请选择">
                <el-option label="@qq.com" value="@qq.com"></el-option>
                <el-option label="@163.com" value="@163.com"></el-option>
                <el-option label="@outlook.com" value="@outlook.com"></el-option>
              </el-select>
            </el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" show-password autocomplete="off" placeholder="请输入密码"></el-input>
            <transition name="el-fade-in-linear">
              <div class="error-info" v-show="showErrorMsg">邮箱或密码错误</div>
            </transition>
          </el-form-item>
        </el-form>
        
        <div slot="footer" class="dialog-footer">
            <el-button round type="primary" @click="userLogin">登 录</el-button>
            <el-button round type="danger" @click="register">注 册</el-button>
        </div>
      </div>
      <Register @showRegister="changeShow" v-show="!show"/>
    </el-dialog>
</template>

<script>
import { user_login } from '@/api'
import Register from './Register.vue'
export default {
    components:{
      Register
    },
    data(){
        return {
            form:{
              email:'',
              password:''
            },
            select:'@qq.com',
            show:true,
            showErrorMsg:false,
            rules:{
              email:[
                { required: true, message: '输入不能为空', trigger: 'blur' },
              ],
              password:[
                { required: true, message: '密码不能为空', trigger: 'blur' },
              ]
            }
        }
    },
    computed:{
      dialogFormVisible(){
        return this.$store.state.dialogFormVisible
      }
    },
    methods:{
        userLogin(){
          let email = this.form.email + this.select;
          let password = this.form.password;
          user_login({
            params:{
              email,
              password
            }
          })
          .then(res => {
            let userInfo = res.data.userInfo
            localStorage.setItem('username', userInfo.userName)
            this.$store.commit('userAvatarUrl', userInfo.img + '?timestamp=' + new Date().getTime())
            console.log(userInfo.img)
            localStorage.setItem('id', userInfo.id)
            if(res.data.message === '登陆成功'){
              this.form.email = ''
              this.form.password = '',
              this.select = '@qq.com'
              this.show = true
              setTimeout(() => {
              this.$message({
                showClose: true,
                message: '登陆成功',
                type: 'success'
              });
              },100),
              this.$store.commit('changeShow', 1)
            }else{
              this.showErrorMsg = true,
              setTimeout(() => {
                this.showErrorMsg = false
              },2000)
            }
          })
          
        },
        register(){
          this.show = false
        },
        handleClose(){
          this.$store.commit('login', 0)
        },
        changeShow(){
          this.show = !this.show;
        }
    },
}
</script>

<style lang="less" scoped>
.error-info{
  position: absolute;
  color: #F5656C;
  font-size: 14px;
  left: 50%;
  margin-left: -80px;
  top: 35px;
}
/deep/.el-dialog__header{
  text-align: center;
  padding-top: 35px;
  .el-dialog__title{
    color: red;
  }
}
.el-form-item{
  margin-bottom: 30px;
  .el-input{
    width: 90%;
    /deep/.el-select .el-input__inner{
      width: 100px;
      padding-left: 10px;
      padding-right: 20px;
    }
  }
}
/deep/.el-dialog__body{
  padding: 20px 20px 0 20px;
}
.dialog-footer{
  text-align: center;
  padding-bottom: 30px;
  .el-button{
    width: 75%;
    margin-bottom: 20px;
  }
  .el-button+.el-button{
    margin-left: 0;
  }
}
</style>